<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>sample</title>
<style type="text/css"  >
html, body { 
	width : 100%;
	height : 100%;
	padding : 0; 
	margin : 10px; 
	overflow : hidden;
	font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; /* MAIN BODY FONTS */
}
.jcTab { width:100%; height:100%;}
</style>
<!-- link href="css/core.css" rel="stylesheet" type="text/css"/ -->
<link href="../css/TabPanel.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="../js/TabPanel.js"></script>
<script type="text/javascript" >
var tabpanel;  
var jcTabs = [
'<iframe src="http://jeesite.com" width="100%" height="100%" frameborder="0"></iframe>',
'1', '2', '3'
];
$(document).ready(function(){  
    tabpanel = new TabPanel({  
        renderTo:'tab',  
        width: 800,  
        height: 400,  
        //border:'none',  
        active : 0,
        //maxLength : 10,  
        items : [
            {id:'toolbarPlugin1',title:'首页',html:jcTabs[0],closable: false},  
            {id:'toolbarPlugin2',title:'不能关闭',html:jcTabs[1],closable: false},  
            {id:'toolbarPlugin3',title:'能关闭',html:jcTabs[2],closable: true}
        ]
    });  
}); 

function addTab(){
	tabpanel.addTab({
		title: '新页签',
		html: new Date(),
		closable: true,
		disabled: false
	});
}
</script>
</head>
<body>
	<div>
		<div id="tab"></div>
		<button onclick="addTab()">新增页签</button>
	</div>
</body>
</html>
